import React, { useState } from 'react';
import { Badge, Grid } from 'antd-mobile';
import {
    MessageOutline,
    RightOutline,
    SearchOutline,
    EnvironmentOutline,
    HeartOutline,
    TeamOutline,
    UserOutline,
    CalendarOutline,
    StarOutline,
    AppOutline,
    MailOutline,
    BankcardOutline,
    EyeOutline,
    ScanningOutline,
    HistogramOutline,
    SmileOutline
} from 'antd-mobile-icons';
import '../styles/homePage.scss';
import { useNavigate } from 'react-router-dom';
import NavHeader from '../components/NavHeader';
import TabBarFooter from '../components/TabBarFooter';

// 科室类型定义
interface Department {
    id: string;
    name: string;
    icon: React.ReactNode;
    bgColor: string;
    iconColor: string;
}

// 医院类型定义
interface Hospital {
    id: string;
    name: string;
    level: string;
    type: string;
    distance: string;
    imageUrl?: string;
    tags?: string[];
}

const HomePage: React.FC = () => {
    const navigate = useNavigate();

    // 科室数据 - 优化图标和背景色
    const departments: Department[] = [
        {
            id: '1',
            name: '心内科',
            icon: <HeartOutline />,
            bgColor: '#fff0f6',
            iconColor: '#eb2f96'
        },
        {
            id: '2',
            name: '神经内科',
            icon: <ScanningOutline />,
            bgColor: '#f9f0ff',
            iconColor: '#722ed1'
        },
        {
            id: '3',
            name: '口腔科',
            icon: <SmileOutline />,
            bgColor: '#e6fffb',
            iconColor: '#13c2c2'
        },
        {
            id: '4',
            name: '眼科',
            icon: <EyeOutline />,
            bgColor: '#e6f7ff',
            iconColor: '#1890ff'
        },
        {
            id: '5',
            name: '耳鼻喉科',
            icon: <MailOutline />,
            bgColor: '#fcffe6',
            iconColor: '#a0d911'
        },
        {
            id: '6',
            name: '皮肤科',
            icon: <StarOutline />,
            bgColor: '#fff7e6',
            iconColor: '#fa8c16'
        },
        {
            id: '7',
            name: '儿科',
            icon: <UserOutline />,
            bgColor: '#f0f5ff',
            iconColor: '#2f54eb'
        },
        {
            id: '8',
            name: '妇产科',
            icon: <CalendarOutline />,
            bgColor: '#fffbe6',
            iconColor: '#faad14'
        }
    ];

    // 医院数据
    const hospitals: Hospital[] = [
        {
            id: '1',
            name: '北京协和医院',
            level: '三级甲等',
            type: '综合医院',
            distance: '1.2km',
            imageUrl: 'https://img.ltcdn.cn/Upload/Image/20220704/1e4e59d9ae79b5c.png',
            tags: ['综合', '内科', '外科']
        },
        {
            id: '2',
            name: '北京人民医院',
            level: '三级甲等',
            type: '综合医院',
            distance: '3.5km',
            imageUrl: 'https://img.ltcdn.cn/Upload/Image/20220704/066bcf41231f4d4.png',
            tags: ['综合', '儿科', '内科']
        },
        {
            id: '3',
            name: '中国医学科学院肿瘤医院',
            level: '三级甲等',
            type: '专科医院',
            distance: '5.7km',
            imageUrl: 'https://img.ltcdn.cn/Upload/Image/20220704/2cb1af95d9c00c3.png',
            tags: ['肿瘤科', '外科']
        }
    ];

    return (
        <div className="home-page">
            {/* 使用公共顶部导航栏组件 */}
            <NavHeader
                title="医预通"
                showBack={false}
                right={<MessageOutline />}
            />

            {/* 主内容区域 */}
            <div className="home-content">
                {/* 搜索框 */}
                <div className="search-container" onClick={() => navigate('/hospital-list')}>
                    <SearchOutline className="search-icon" />
                    <span className="search-text">搜索医院、科室、医生</span>
                </div>

                {/* 名医馆部分 */}
                <div className="famous-hospital-section">
                    <div className="section-title">名医馆</div>
                </div>

                {/* 功能菜单 */}
                <div className="function-menu">
                    <div className="menu-item" onClick={() => navigate('/hospital-list')}>
                        <div className="icon hospital-icon">
                            <HistogramOutline />
                        </div>
                        <span className="text">找医院</span>
                    </div>
                    <div className="menu-item" onClick={() => navigate('/departments')}>
                        <div className="icon department-icon">
                            <AppOutline />
                        </div>
                        <span className="text">找科室</span>
                    </div>
                    <div className="menu-item" onClick={() => navigate('/doctors/all')}>
                        <div className="icon doctor-icon">
                            <UserOutline />
                        </div>
                        <span className="text">找医生</span>
                    </div>
                    <div className="menu-item" onClick={() => navigate('/my-appointments')}>
                        <div className="icon appointment-icon">
                            <CalendarOutline />
                        </div>
                        <span className="text">我的预约</span>
                    </div>
                </div>

                {/* 健康直通车 */}
                <div className="section-header">
                    <span className="title">健康直通车</span>
                    <span className="more" onClick={() => navigate('/departments')}>
                        更多科室 <RightOutline fontSize={12} />
                    </span>
                </div>

                {/* 科室网格 - 优化样式 */}
                <div className="department-grid">
                    {departments.map(dept => (
                        <div
                            className="department-item"
                            key={dept.id}
                            onClick={() => navigate(`/doctors/${dept.id}`)}
                            style={{ backgroundColor: dept.bgColor }}
                            title={`查看${dept.name}医生列表`}
                        >
                            <div
                                className="department-icon"
                                style={{ color: dept.iconColor }}
                            >
                                {dept.icon}
                            </div>
                            <span className="department-name">{dept.name}</span>
                        </div>
                    ))}
                </div>

                {/* 附近医院 */}
                <div className="section-header">
                    <span className="title">附近医院</span>
                    <span className="more" onClick={() => navigate('/hospital-list')}>
                        查看全部 <RightOutline fontSize={12} />
                    </span>
                </div>

                <div className="nearby-hospitals">
                    {hospitals.map(hospital => (
                        <div className="hospital-card" key={hospital.id} onClick={() => navigate(`/hospital/${hospital.id}`)}>
                            <div className="hospital-logo">
                                {hospital.imageUrl && <img src={hospital.imageUrl} alt={hospital.name} />}
                            </div>
                            <div className="hospital-info">
                                <div className="hospital-name">{hospital.name}</div>
                                <div className="hospital-tags">
                                    {hospital.tags?.map((tag, index) => (
                                        <span key={index} className="tag">{tag}</span>
                                    ))}
                                </div>
                                <div className="hospital-type">
                                    {hospital.level} | {hospital.type}
                                </div>
                                <div className="hospital-distance">
                                    <EnvironmentOutline className="location-icon" />
                                    <span>{hospital.distance}</span>
                                </div>
                            </div>
                            <button className="booking-btn" onClick={(e) => {
                                e.stopPropagation();
                                navigate(`/doctor-list?hospitalId=${hospital.id}`);
                            }}>预约</button>
                        </div>
                    ))}
                </div>
            </div>

            {/* 使用公共底部标签栏组件 */}
            <TabBarFooter activeKey="home" />
        </div>
    );
};

export default HomePage; 